<template>
	<view  class="bg">
		<view class="submitBg">
			<image src="../../static/senceBg.jpg" mode=""></image>
		<view class="info">
			<view class="destinfo" @click="openinfo">
			 <view class="" >
			 	 目的地
			 </view>
			<view class="choose" >
				选择
				<i class="iconfont">&#xe6ab;</i>
			</view>
			</view>
			<view class="destinfo" @click="onShowDatePicker('range')">
				<view class="">
					出行日期
				</view>
			
			<view class="choose">
				选填
			</view>
			</view>
			<view class="destinfo">
				<input type="text" value="" placeholder="人数" />
			
			<view class="choose">
				选填
			</view>
			</view>
			<button type="primary" class="btn-submit">
			免费获取旅行方案
			</button>
		</view>
		</view>
		
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		
	</view>
</template>

<script>
import MxDatePicker from "@../../components/mx-datepicker/mx-datepicker.vue";
	export default {
		 components: {
            MxDatePicker
        },
		data() {
			return {
				isShow:false,
				showPicker: false,
                date: '2019/01/01',
                time: '15:00:12',
                datetime: '2019/01/01 15:00:12',
                range: ['2019/01/01','2019/01/06'],
                rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
                type: 'rangetime',
                value: ''
			};
		},
	  methods: {
            onShowDatePicker(type){//显示
                this.type = type;
                this.showPicker = true;
                this.value = this[type];
				console.log('1111111');
            },
            onSelected(e) {//选择
                this.showPicker = false;
                if(e) {
                    this[this.type] = e.value; 
                    //选择的值
                    console.log('value => '+ e.value);
                    //原始的Date对象
                    console.log('date => ' + e.date);
                }
            },
			 openinfo() {
			      
			      //var newsid = e.currentTarget.dataset.newsid ;    
			      uni.navigateTo({
			          url: '../city/city',
			          success: res => {},
			          fail: () => {},
			          complete: () => {}
			      });
			  }
        }
	}
</script>

<style>
  .submitBg{
	  width: 100%;
	  height: 300rpx;
	  position: relative;
  }
  .submitBg image{
	  width: 100%;
	  height: 100%;
  }
  .info{
	 width: 94%;
	 background: #fff;
	 position: absolute;
	 top: 200rpx;
	 left: 3%;
	 border-radius: 10rpx;
	 padding: 5%;
	 box-sizing: border-box;
  }
  .destinfo{
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  border-bottom: 2rpx solid #efefef;
	  font-size: 32rpx;
	  display: flex;
	  justify-content: space-between;
  }
  .bg{
	  background: #f9f9f9;
	  height: 85vh;
	  overflow: hidden;
  }
  .choose{
	  color: #cccccc;
	  }
 .destinfo input{
       height: 100%;
	  }
  .btn-submit{
	  width: 80%;
	  margin: 0 auto;
	 background: #52cd85;
	 border-radius: 40rpx;
	 height: 80rpx;
	 line-height: 80rpx;
	 text-align: center;
	 color: #fff;
	 font-size: 34rpx;
	 margin-top: 40rpx;
  }
</style>
